import React, { Component } from "react";
import Unit from "../../unit";
import { Pagination } from "antd";
import { withRouter, NavLink } from "react-router-dom";
import { observer, inject } from "mobx-react";
import Details from "./details";
@withRouter
@inject("two", "first", "obser")
@observer

// localStorage 不清除永远都在
// sessionStorage 关闭浏览器会自动清除
// import "antd/dist/antd.css";
// https://home-api.pinduoduo.com/home/mediareports?page_number=1&page_size=20
// http://api.bdplus.cn/api/userinfo?page=1&pageSize=100  get   查看
class View extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: [],
      loading: true,
      pPageCfg: {
        page_number:
          decodeURIComponent(sessionStorage.getItem("currentPage")) || 1,
        page_size: 10,
      },
      setPageCfg: {
        currentPage: 1,
        totalPage: 10,
      },
    };
    // this.getPag = this.getPag.bind(this);
  }
  getPag = (page, page_size = 10) => {
    sessionStorage.setItem("currentPage", encodeURIComponent(page));
    const { pPageCfg } = this.state;
    pPageCfg.page_number = page;
    pPageCfg.page_size = page_size;
    Unit.getApi2("home/mediareports", pPageCfg, {}).then((res) => {
      console.log(res.data);
      if (res.data.code === 200) {
        this.setState({
          listData: res.data.data,
          loading: false,
          setPageCfg: {
            currentPage: page,
            totalPage: res.data.total,
          },
        });
      } else {
      }
    });
  };
  // tag(e, id) {
  //   this.props.history.push(`/page/details:${id}`);
  //   if (id) {
  //     <Details id={id} data={this.state.listData} />;
  //   } else {
  //     <View />;
  //   }
  // }
  // onClink={(e, id) => {
  //   this.tag(e, item.id);
  // }}
  lists = () => {
    const { listData } = this.state;
    const lists = listData.map((item, index) => {
      return (
        <li key={index}>
          {/* <span>{item.id}、</span> */}
          {/* <a href={item.jump_url}>{item.main_title}</a> */}
          <span>{item.source}</span>
          {/* <span>{item.sourceDate}</span> */}
        </li>
      );
    });
    return lists;
  };
  componentDidMount = () => {
    // 拼多多
    const { pPageCfg } = this.state;
    setTimeout(() => {
      this.getPag(pPageCfg.page_number);
    }, 2000);
  };
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  render() {
    console.log(this.props.two, this.props.first);
    const { listData, loading, setPageCfg } = this.state;
    const { name } = this.props.obser;
    return (
      <React.Fragment>
        {/* {this.tag()} */}
        <NavLink to="storepage">storepage</NavLink>
        <NavLink to="newstore">newstore</NavLink>
        <NavLink to="page">page</NavLink>
        <div>她的名字：{name}</div>
        <ul className="page">
          {loading ? (
            <div className="loading_box">
              <div className="loading"></div>
            </div>
          ) : listData.length !== 0 ? (
            this.lists()
          ) : (
            <div className="no_result">小主，什么也没有呀~</div>
          )}
        </ul>
        {listData.length !== 0 ? (
          <Pagination
            defaultCurrent={setPageCfg.currentPage}
            total={setPageCfg.totalPage}
            onChange={this.getPag}
          />
        ) : (
          ""
        )}
      </React.Fragment>
    );
  }
}
export default View;
